<script setup lang="ts">
  import { Affix } from '@arco-design/web-vue';
  import { useRouter, useRoute, RouterLink } from 'vue-router';
  import { computed, ref } from 'vue';
  import { UserProfile } from '/@/components/Connect';
  import IconLogo from '/@/assets/home/logo.png';

  const router = useRouter();
  const route = useRoute();
  const currentPath = computed(() => {
    return router.currentRoute.value.path;
  });
  const isAuthorCenter = computed(() => {
    return route.meta.isAuthorCenter;
  });
  const isFixed = ref(false);
  const isWhiteBg = computed(() => {
    return isFixed.value || !route.meta.isHome;
  });

  interface NavItemRecord {
    label: string;
    to: string;
    icon?: string;
  }
  const navList: NavItemRecord[] = [
    {
      label: '首页',
      to: '/',
    },
    {
      label: '文章',
      to: '/recommend',
    },
    {
      label: '星点',
      to: '/pins',
    },
    // {
    //   label: '课程',
    //   to: '/jobs',
    //   // icon: fireIcon,
    // },
    {
      label: '专栏',
      to: '/column',
    },
    {
      label: '最新活动',
      to: '/events',
    },
  ];

  /**
   * 布局改变
   * @param fixed 是否悬浮布局
   */
  function onAffixChange(fixed: boolean) {
    isFixed.value = fixed;
  }

  /**
   * 检查是否是全匹配地址
   * @param path 地址
   */
  const checkIsFullMatchPath = (path: string) => {
    return ['/'].includes(path);
  };

  /**
   * 检测导航项与当前地址是否匹配
   * @param path 地址
   */
  const checkIsActive = (path: string) => {
    return checkIsFullMatchPath(path)
      ? currentPath.value === path
      : new RegExp(`^${path}\/?.*`).test(currentPath.value);
  };
</script>

<template>
  <Affix @change="onAffixChange">
    <div
      class="relative w-full h-20 z-50 transition duration-150 ease-in"
      :class="{ 'bg-white border-b border-b-[#f1f1f1]': isWhiteBg }"
    >
      <header class="h-full">
        <div class="flex items-center h-full max-w-1440 w-full ml-auto mr-auto">
          <a class="flex-none ml-[71px] mr-[48px] text-4xl text-black font-bold" href="/">
            <img class="w-[130px]" :src="IconLogo" />
          </a>
          <nav class="hidden sm:block h-full flex-auto">
            <ul class="flex flex-row-reverse h-full items-center justify-between">
              <li v-if="!isAuthorCenter" class="flex order-[99]"
                ><ul class="flex">
                  <li class="flex-none" v-for="item in navList" :key="item.label">
                    <RouterLink
                      :to="item.to"
                      class="relative h-[80px] mx-[30px] text-[16px] flex items-center justify-center group hover:text-black"
                      :class="[
                        checkIsActive(item.to) ? 'text-blue-500 font-medium' : 'text-gray-700',
                      ]"
                    >
                      <img v-if="item.icon" class="w-[18px] mr-2" :src="item.icon" />
                      {{ item.label }}
                      <i
                        class="hidden absolute top-auto bottom-0 inset-x-0 h-[2px] bg-blue-500 group-hover:block"
                      ></i
                    ></RouterLink>
                  </li>
                </ul>
              </li>
              <ul class="flex items-center justify-end space-x-[20px] pr-[48px]">
                <li v-if="!isAuthorCenter" class="flex items-center justify-center">
                  <a-input-search :style="{ width: '280px' }" placeholder="探索极星未来" />
                </li>
                <li v-if="!isAuthorCenter" class="flex items-center justify-center">
                  <RouterLink to="/creator/home">
                    <a-button-group>
                      <a-button type="primary" class="bg-[#5F70FF]">创作者中心</a-button>
                      <a-button type="primary" class="bg-[#5F70FF]">
                        <template #icon>
                          <icon-down />
                        </template>
                      </a-button>
                    </a-button-group>
                  </RouterLink>
                </li>
                <li class="flex items-center justify-center h-[15px] w-[35px]">
                  <RouterLink to="/notification">
                    <svg
                      class="w-[18.34px]"
                      :class="[isWhiteBg ? 'text-[#000] opacity-[0.2]' : 'text-white']"
                      width="20"
                      height="20"
                      viewBox="0 0 20 20"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        fill-rule="evenodd"
                        clip-rule="evenodd"
                        d="M9.96075 2.00015C6.88624 2.00015 4.45244 4.59756 4.45244 7.67757V10.9679C4.45244 11.1665 4.39822 11.3607 4.29669 11.5255L2.80684 13.9449L2.79697 13.9606C2.62553 14.2278 2.64431 14.4718 2.73279 14.6474C2.82474 14.8298 3.02575 15.0002 3.34954 15.0002H16.6651C16.8985 15.0002 17.1246 14.8486 17.2509 14.6033C17.3715 14.369 17.3533 14.1559 17.2401 13.994C17.2341 13.9855 17.2283 13.9769 17.2226 13.9682L15.6396 11.5489C15.5287 11.3793 15.4691 11.1762 15.4691 10.9679V7.67757C15.4691 6.13196 14.8411 4.65457 13.9042 3.67326C12.8393 2.65732 11.4709 2.00015 9.96075 2.00015ZM2.61911 7.67757C2.61911 3.40274 5.95848 0.000152588 9.96075 0.000152588C11.9824 0.000152588 13.7746 0.885624 15.1288 2.1847C15.1379 2.19347 15.1469 2.20244 15.1557 2.21161C16.4464 3.55297 17.3024 5.55292 17.3024 7.67757V10.6476L18.7072 12.7947C19.3283 13.6946 19.2621 14.7807 18.8495 15.5825C18.4403 16.3775 17.6422 17.0002 16.6651 17.0002H3.34954C1.36754 17.0002 0.0945798 14.6981 1.28943 12.8224L2.61911 10.6632V7.67757ZM6.33333 19.0002C6.33333 18.4479 6.74373 18.0002 7.25 18.0002H12.75C13.2563 18.0002 13.6667 18.4479 13.6667 19.0002C13.6667 19.5524 13.2563 20.0002 12.75 20.0002H7.25C6.74373 20.0002 6.33333 19.5524 6.33333 19.0002Z"
                        fill="currentColor"
                      />
                    </svg>
                  </RouterLink>
                </li>
                <li class="flex items-center justify-center">
                  <UserProfile :isWhiteBg="isWhiteBg" />
                </li>
              </ul>
            </ul>
          </nav>
        </div>
      </header>
    </div>
  </Affix>
</template>
